<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>eleScale-Test</title>
    <style>
        body {
            height: 100%;
            margin: 0px;
            background-color: aquamarine;
        }

        .scale {
            position: relative;
            margin: 50px auto;
            width: 100px;
            height: 100px;
            background-color: rgb(54, 54, 54);
        }

        .btn_scale {
            position: absolute;
            top: 30%;
            left: 50%;
            width: 100px;
            height: 50px;
        }
    </style>
</head>

<body>
    <!-- 点击旋转动画 -->
    <div class="scale"></div>
    <button class="btn_scale">点击缩放</button>



    <script type="text/javascript" src="../src/tatu.js"></script>
    <script>
        const scale = document.querySelector('.scale');
        const btnScale = document.querySelector('.btn_scale');
        let flag = true;

        /*  eleScale(): 缩放动画---参数说明:
            参数一: htmlElement: 需要操作的html元素
            参数二: scaleXArr: X方向缩放倍数，值如[1,2]，类型array
            参数三: scaleYArr: Y方向缩放倍数，值如[1,2]，类型array
            参数四: duration: 完成时间（ms），一般大于等于1000ms，类型number
            参数五: timing: 运动曲线，值为'linear'线性，或者 'ease'渐慢，类型string
            参数六: step: 步数间隔，最小值为1，类型number，此为1时，运动曲线为linear
            参数七: callback: 可选，动画完成后的回调函数
        */

        btnScale.addEventListener('click', () => {
            if (flag) {
                flag = false;
                eleScale(scale, [1, 2], [1, 0.5], 100, 'ease', 0.03, () => {
                    eleScale(scale, [2, 1], [0.5, 1], 100, 'ease', 0.03, () => {
                        console.log('ok');
                        flag = true;
                    })
                })
            }



            // eleMov(scale, 0, 250, 210, 'h', 'ease', 5, () => {
            //     eleRotate(scale, 0, -90, 200, 'ease', 5, () => {
            //         eleScale(scale, [1, 0.3], [1, 2], 10, 'ease', 0.05, () => {
            //             console.log('ok');
            //         })
            //     })
            // });
        });
    </script>
</body>

</html>